<template>
  <view style="width: 100%;height: 100%;">
    <view class="root">
      <view class="content">
        <uni-forms ref="formRef" :model="form" validateTrigger="blur" label-position="top" label-width="100%"
          err-show-type="toast">
          <view class="content-wrapper">
            <view class="content-inner-wrapper">
              <uni-forms-item label="业主姓名:" name="ownerName" required key="ownerName">
                <view class="form-content-item" :class="form.ownerName ?  '' : 'input-item'">
                  <uni-easyinput type="text" v-model="form.ownerName" :inputBorder="false" placeholder="请填写"
                    :clearable="true" />
                </view>
              </uni-forms-item>
              <uni-forms-item label="身份证号:" name="idNumber" required key="idNumber">
                <view class="form-content-item" :class="form.idNumber ?  '' : 'input-item'">
                  <uni-easyinput type="idcard" :maxlength="18" v-model="form.idNumber" :inputBorder="false"
                    placeholder="请填写" :clearable="true" />
                </view>
              </uni-forms-item>
              <uni-forms-item label="联系电话:" name="phoneNumber" required key="phoneNumber">
                <view class="form-content-item" :class="form.phoneNumber ?  '' : 'input-item'">
                  <uni-easyinput type="number" :maxlength="11" v-model="form.phoneNumber" :inputBorder="false"
                    placeholder="请填写" :clearable="true" />
                </view>
              </uni-forms-item>
              <uni-forms-item label="开锁时间:" name="unlockTime" required key="unlockTime">
                <view class="form-content-item" :class="form.unlockTime ?  '' : 'input-item'">
                  <uni-datetime-picker :end="getLastTimeOfTheDay()" v-model="form.unlockTime" type="datetime"
                    :hide-second="true">
                    <uni-easyinput type="text" v-model="form.unlockTime" :inputBorder="false" placeholder="请选择"
                      :clearable="false" disabled />
                  </uni-datetime-picker>
                </view>
              </uni-forms-item>
              <uni-forms-item label="地图选点:" name="mapPoint" required style="margin-bottom: 0;">
                <uni-easyinput type="text" v-model="form.mapPoint" :inputBorder="false" placeholder="请选择"
                  :clearable="false">
                  <image style="width: 30rpx;height: 40rpx;margin-right: 10rpx;" @click="handleMap"
                    :src="`${baseImgUrl}map-icon.png`" slot="right"></image>
                </uni-easyinput>
              </uni-forms-item>
              <uni-forms-item label="详细地址:" name="detailedAddress" required style="margin-bottom: 0;">
                <uni-easyinput type="text" v-model="form.detailedAddress" :inputBorder="false" placeholder="请填写小区门牌号"
                  :clearable="true" />
              </uni-forms-item>
            </view>
          </view>
        </uni-forms>
      </view>
      <view class="bottom">
        <yy-button-submit @submit="onSubmit"></yy-button-submit>
      </view>
    </view>
  </view>
</template>

<script>
  import _ from '@/utils/lodash.js'
  import uploadFileMixin from '../../utils/upload-file-mixin'
  import {
    Toast,
    generateUrlOptions,
    getOptionsParams,
    idCardRule,
    isLoading,
    navBack,
    phoneRule,
    getLastTimeOfTheDay
  } from '../../utils/util'
  import {
    addPawnRecordDetails,
    addunlockRecord
  } from '../../api/api'

  import moment from '@/utils/moment'
  export default {
    mixins: [uploadFileMixin],
    data() {
      return {
        baseImgUrl: this.$baseImgUrl,
        routerParams: {},
        formRef: null,
        form: this.initForm(),
        rules: {
          ownerName: {
            rules: [{
              required: true,
              errorMessage: "请填写业主姓名！",
            }]
          },
          idNumber: {
            rules: idCardRule()
          },
          phoneNumber: {
            rules: phoneRule()
          },
          unlockTime: {
            rules: [{
              required: true,
              errorMessage: "请选择开锁时间！",
            }]
          },
          mapPoint: {
            rules: [{
              required: true,
              errorMessage: "请选择地图选点！",
            }]
          },
          detailedAddress: {
            rules: [{
              required: true,
              errorMessage: "请填写详细地址！",
            }]
          },
        },
      }
    },
    onLoad(options) {
      this.routerParams = getOptionsParams(options)
    },
    onReady() {
      this.$refs.formRef.setRules(this.rules)
    },
    methods: {
      getLastTimeOfTheDay,
      initForm() {
        return {
          ownerName: '',
          idNumber: '',
          phoneNumber: '',
          unlockTime: '',
          mapPoint: '',
          detailedAddress: '',
        }
      },
      onSubmit() {
        this.$refs.formRef.validate().then(() => {
            let data = {
              companyMessageId: this.routerParams.companyMessageId,
              ...this.form,
              unlockTime: moment(this.form.unlockTime).format('YYYY/MM/DD HH:mm:ss'),
            };

            isLoading(true)
            addunlockRecord(data).then((res) => {
                if (res.code == 200) {
                  setTimeout(() => {
                    navBack();
                  }, 100)
                  uni.$emit('unblankingAdd')
                }
                Toast(res.message);
              })
              .finally(() => {
                isLoading(false)
              })
          })
          .catch(() => {})
      },
      handleMap() {
        uni.chooseLocation({
          success: (res) => {
            let {
              longitude,
              latitude,
              address
            } = res;
            this.form.mapPoint = address
          },
          fail: function(err) {
            console.log(err, "错误的");
          },
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../styles/uni-form-label-top.scss';

  .root {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    background: #F9F9F9;

    .content {
      flex: 1;
      height: 0;
      overflow: auto;

      .content-wrapper {
        background: #FFFFFF;
        box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(207, 207, 207, 0.1608);
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        padding: 40rpx 20rpx;
        margin-bottom: 10rpx;
      }
    }
  }
</style>